<template>
    <view class="swiper-container">
        <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
            :duration="duration" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor">
            <swiper-item v-for="(item, index) in swiperList" :key="index">
                <image :src="item" class="swiper-image" mode="aspectFill"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
import { ref, onMounted } from 'vue';
export default {
    name: 'SwiperComponent',
    props: {
        // 轮播图数据列表
        swiperList: {
            type: Array,
            default: () => []
        },
        // 是否显示指示点
        indicatorDots: {
            type: Boolean,
            default: true
        },
        // 是否自动播放
        autoplay: {
            type: Boolean,
            default: true
        },
        // 自动切换时间间隔
        interval: {
            type: Number,
            default: 3000
        },
        // 滑动动画时长
        duration: {
            type: Number,
            default: 500
        },
        // 指示点颜色
        indicatorColor: {
            type: String,
            default: 'rgba(255, 255, 255, 0.6)'
        },
        // 当前选中的指示点颜色
        indicatorActiveColor: {
            type: String,
            default: '#FF6E26'
        }
    },
    setup(props) {
        const swiperList = ref(props.swiperList);
        const indicatorDots = ref(props.indicatorDots);
        const autoplay = ref(props.autoplay);
        const interval = ref(props.interval);
        const duration = ref(props.duration);
        const indicatorColor = ref(props.indicatorColor);
        const indicatorActiveColor = ref(props.indicatorActiveColor);
        onMounted(() => {
            swiperList.value = props.swiperList;
        });

        return {
            swiperList,
            indicatorDots,
            autoplay,
            interval,
            duration,
            indicatorColor,
            indicatorActiveColor
        }
    }
}
</script>

<style lang="scss" scoped>
.swiper-container {
    width: 100%;
    height: 200px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-container {
    height: 200px;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

.swiper-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
</style>